<script>
export default {
  name: "overview",
  props: {
    overview: {
      type: Object,
      default: () => ({})
    },
    // 前缀
    prefix: {
      type: String,
      default: '当月'
    }
  },
  methods: {
    // 转为万
    toWan(num) {
      return (num / 10000).toFixed(2);
    },
    // 转为万 不保留小数
    toWanInt(num) {
      return (num / 10000).toFixed(0);
    }
  }
}
</script>

<template>
  <view class="overview">
    <view class="item">
      <view class="num">
        {{toWan(overview.orderNumber)}}
        <view class="small">万</view>
      </view>
      <view class="title">{{prefix}}订单数</view>
    </view>
    <view class="item">
      <view class="num">{{toWanInt(overview.salesRevenue)}}<view class="small">万</view></view>
      <view class="title">{{prefix}}的销售额</view>
    </view>
    <view class="item">
      <view class="num">{{toWan(overview.salesVolume)}}<view class="small">万件</view></view>
      <view class="title">{{prefix}}销量</view>
    </view>
    <view class="item">
      <view class="num">{{toWan(overview.stockNumber)}}<view class="small">万件</view></view>
      <view class="title">{{prefix}}的库存数量</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.overview{
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  .item{
    text-align: center;
    display: inline-block;
    .num{
      font-size: 42rpx;
      color: #000;
      font-weight: bold;
      .small{
        font-size: 24rpx;
        display: inline-block;
        margin: 4rpx;
        color: #888;
      }
    }
    .title{
      font-size: 28rpx;
      color: #666;
      margin-top: 15rpx;
    }
  }
}
</style>